import classNames from 'classnames';
import { format } from 'date-fns';
import { useContext, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import Button from 'src/component/Button';
import ConfirmReceiptModal from 'src/component/ConfirmReceiptModal';
import Image from 'src/component/Image';
import { ThemeContext } from 'src/context/ThemeContext';
// import { Fill } from 'src/model/Order';
import { openSnackbar } from 'src/redux/uiSlice';
// import { confirmFill } from 'src/service/orderService';
import { bnFormat } from 'src/util/bigNumber';
import { Page } from 'src/constant/Page';
import { updateOrder } from 'src/service/orderService';
import style from './OrderList.module.scss';

type Fill = any

type Props = {
  dataArray?: Fill[];
  onRefresh?: () => void;
};

const OrderList = ({ dataArray, onRefresh }: Props) => {
  const { t } = useTranslation();
  const navigate = useNavigate()
  const dispatch = useDispatch();
  const [receiptUrl, setReceiptUrl] = useState<string>('');
  const [fillIdToConfirm, setFillIdToConfirm] = useState<string>('');
  const [curinfo, setCurinfo] = useState<any>({});
  const { IcSearch } = useContext(ThemeContext).image;
  const token = localStorage.getItem("token")

  const onCheckReceipt = (fill: Fill) => {
    if (!fill.FAttachment) return;
    let url = "https://918admin.bit-otc.com" + fill.FAttachment
    setReceiptUrl(url);
  };

  const onConfirmFill = (tfaCode: string) => {
    if (!curinfo?.FID) return;
    updateOrder({
      FID: curinfo?.FID,
      token: token
    }).then(res => {
      if (res.success) {
        onRefresh && onRefresh();
      }
      else dispatch(openSnackbar({ message: res.message, severity: 'alert' }))
    })
  };

  const elementMapFunction = (fill: Fill, index: number, array: Fill[]) => (
    <div key={fill.FID}>
      <div className={style.item}>
        <div className={style.itemHeading}>
          <div>
            {`${"数量"} ${bnFormat(fill.FQuantity)} ${"USDT"}`}
          </div>
          {/* <div>{`${"单价"} ${bnFormat(fill.FPrice)}`}</div> */}
          <div>{`${"单价"} ${fill.FPrice}`}</div>
        </div>
        <div className={style.infoBlock}>
          <div className={style.infoColumn}>
            <div className={style.infoItem}>
              <div className={style.infoTitle}>{"订单编号"}</div>
              <div className={style.infoValue}>{fill.FID}</div>
            </div>
            <div className={classNames(style.infoItem, style.marginTop3)}>
              <div className={style.infoTitle}>时间</div>
              <div className={style.infoValue}>
                {format(Date.parse(fill.FAddtime), 'yyyy/MM/dd HH:mm:ss')}
              </div>
            </div>
            <div className={classNames(style.infoItem, style.marginTop3)}>
              <div className={style.infoTitle}>{"户名"}</div>
              <div className={style.infoValue}>{fill.FBHm}</div>
            </div>
            <div className={classNames(style.infoItem, style.marginTop3)}>
              <div className={style.infoTitle}>{"银行帐号/卡号"}</div>
              <div className={style.infoValue}>{fill.FBZh}</div>
            </div>
          </div>
          <div className={classNames(style.infoColumn, style.infoColumnMargin)}>
            <div className={style.infoItem}>
              <div className={style.infoTitle}>{"收款金额"}</div>
              <div className={classNames(style.infoValue, style.totalValue)}>
                {`${bnFormat(fill.FCNY)} ${"CNY"}`}
              </div>
            </div>
            <div className={classNames(style.infoItem, style.marginTop3)}>
              <div className={style.infoTitle}>银行名称</div>
              <div className={style.infoValue}>{fill.FBMc}</div>
            </div>
            <div className={classNames(style.infoItem, style.marginTop3)}>
              <div className={style.infoTitle}>{"银行分行"}</div>
              <div className={style.infoValue}>{fill.FBFy}</div>
            </div>
          </div>
        </div>
        {fill.FState === '已付款待确认' && (
          <div className={style.buttons}>
            <div>
              <div className={style.checkout} onClick={() => onCheckReceipt(fill)}>
                查看回单
                <img src={IcSearch} />
              </div>
              {fill.FAttachmentTime && <div>{format(Date.parse(fill.FAttachmentTime), 'yyyy/MM/dd HH:mm:ss')}</div>}
            </div>
            <Button appearance="secondary" size="small" onClick={() => { setFillIdToConfirm(fill.FID); setCurinfo(fill) }}>
              查收放币
            </Button>
          </div>
        )}
      </div>
      <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
    </div>
  );

  return (
    <>
      <div className={style.list}>{dataArray?.map(elementMapFunction)}</div>
      <Image open={receiptUrl.length > 0} src={receiptUrl} onClose={() => setReceiptUrl('')} />
      <ConfirmReceiptModal
        open={fillIdToConfirm.length > 0}
        onClose={() => setFillIdToConfirm('')}
        onSubmit={onConfirmFill}
      />
    </>
  );
};

export default OrderList;
